<%--
  Created by IntelliJ IDEA.
  User: 22711
  Date: 2021/10/28
  Time: 19:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/sockjs.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/stomp.min.js"></script>
</head>
<style>
    .message-div{
        width: 200px;
        font-size: 13px;
        height: 100px;
        position: fixed;
        top: 5%;
        background-color: papayawhip;
        left: 75%;
        z-index: 99999;
        padding: 5px;
        overflow: hidden;
        border: 1px cyan solid;
    }
    .message-top{
        width: 200px;
        background-color: cyan;
        height: 1px;
        margin-top: -6px;
        margin-bottom: 5px;
    }

    .btn-message-close{
        cursor: pointer;
        font-size: 17px;
        position: relative;
        left: 183px;
        top: -4px;
        color: red;
    }

    #get-message{
        color: #666;
    }
    .message-time {
        position: relative;
        font-size: 12px;
        top: 26px;
        color: #666;
        left: 67px;
    }

</style>
<body>
<div id="message_id"></div>

<%--===================消息推送--%>
<script>
    var stompClient;

    var serverUrl = "http://localhost:8080/xj_car_rental/websocket";

    var room;//频道号


    var websocket = null;
    conectWebSocket()
    //websocket连接
    function conectWebSocket(){
        this.room = "${loginCustomer.custId}";
        var socket = new SockJS(this.serverUrl);
        this.stompClient = Stomp.over(socket);
        var that = this;
        this.stompClient.connect({}, function (frame) {
            that.stompClient.subscribe('/topic/'+that.room ,function(txt) {
                // console.log("websocket连接成功");
                console.log(txt);
                var content = JSON.parse(txt.body)['content'];
                var createTime = JSON.parse(txt.body)['createTime'];
                // document.getElementById('message_id').innerHTML += JSON.parse(txt.body)['content']+ '<br/>';
                var divEle = '<div class="message-div">\n' +
                    '    <span class="btn-message-close">×</span>\n' +
                    '    <div class="message-top"></div>\n' +
                    '    <div>\n' +
                    '        <span id="get-message">' + content + '</span>\n' +
                    '    </div>\n' +
                    '<span class="message-time">' + createTime + '</span>'+
                    '</div>'
                $("#message_id").append(divEle);
                $(".btn-message-close").click(function (){
                    $(".message-div").hide();
                })
                // const sender = JSON.parse(message.body)['sender'];
                // const language = JSON.parse(message.body)['language'];
                // const content = JSON.parse(message.body)['content'];
                // const type = JSON.parse(message.body)['type'];
            });
        });


    }

    //发送消息
    /*  function sendMessage() {
          //获取输入的文本信息进行发送
          var message = document.getElementById('text').value;
          // var room = document.getElementById('toUser').value;
          var socketMsg = {msg:message,toUser:room};
          var that = this
          this.stompClient.send(
              '/app/chat',
              {},
              JSON.stringify({
                  'room': that.room,
                  'type': "1",//1,2
                  'content': message,
                  'userId':"566072523",//小明
                  'questionId':"222299023",//题目1
                  'createTime':"",
              })
          );

      }*/


    function disconnect() {

        //断开连接的方法
        if (this.stompClient !== undefined) {

            this.stompClient.disconnect();
            alert("Disconnected");
        }else{
            alert("当前没有连接websocket")
        }
        this.stompClient = undefined;

    }

</script>

</body>
</html>
